<template>
  <div v-show="false" class="print-bill">
    <div style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'">
      <h1 style="text-align: center">订单确认单</h1>
      <div class="slogan">
        {{
          `${checkData.customerName}感谢贵公司的支持与厚爱，${userStore.tenantName}将竭诚为您做好产品和服务工作!`
        }}
      </div>
      <div class="bill-info">
        <div class="info-item">产品清单：</div>
        <div class="info-item">订单编号：{{ checkData.saleOrderCode }}</div>
      </div>
      <table border="1" cellpadding="0" cellspacing="0" width="100%" class="erp-font-size-12">
        <tr style="line-height: 35px">
          <td width="50" style="text-align: center">序号</td>
          <td width="200" style="text-align: center">产品名称</td>
          <td width="200" style="text-align: center">规格型号</td>
          <td width="50" style="text-align: center">单位</td>
          <td width="50" style="text-align: center">数量</td>
          <td width="50" style="text-align: center">单价</td>
          <td width="90" style="text-align: center">金额（元）</td>
          <td width="150" style="text-align: center">备注</td>
        </tr>
        <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
          <td width="50" style="text-align: center">{{ index + 1 }}</td>
          <td width="200" style="text-align: center">{{ item.productName }}</td>
          <td width="200" style="text-align: center">{{ item.materialName }}</td>
          <td width="50" style="text-align: center">{{ item.unit }}</td>
          <td width="50" style="text-align: center">{{ item.qty }}</td>
          <td width="50" style="text-align: center">{{ item.unitPrice }}</td>
          <td width="90" style="text-align: center">
            {{ `¥${formatPrice(decimalRound(item.qty! * item.unitPrice!, 4))}` }}
          </td>
          <td width="150" style="text-align: center"></td>
        </tr>
      </table>
      <div></div>
      <ol style="padding-inline-start: 20px">
        <li>
          交货方式：
          <span
            v-if="checkData.deliveryMethod"
            style="border-bottom: 1px solid black; display: inline-block"
          >
            {{ checkData.deliveryMethod }} 。
          </span>
          <span v-else style="border-bottom: 1px solid black; width: 100px; display: inline-block">
            &nbsp
          </span>
        </li>
        <li>
          发票开具：
          <span style="border-bottom: 1px solid black; display: inline-block">
            {{ checkData.isInclTax ? '含税' : '不含税' }} 。
          </span>
        </li>
        <li>
          结算方式：
          <span
            v-if="checkData.deliveryMethod"
            style="border-bottom: 1px solid black; display: inline-block"
          >
            {{ checkData.settlementType }} 。
          </span>
          <span v-else style="border-bottom: 1px solid black; width: 100px; display: inline-block">
            &nbsp
          </span>
        </li>
      </ol>
      <div class="company-info">
        <div>
          <div>{{ checkData.customerName }}</div>
          <div>联系人：{{ checkData.contactName }}</div>
          <div>联系电话：{{ checkData.contactPhone }}</div>
          <div>日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
        </div>
        <div>
          <div>{{ userStore.tenantName }}</div>
          <div>联系人：{{ userStore.userName }}</div>
          <div>联系电话：{{ userStore.phoneNumber }}</div>
          <div>日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SaleResItem } from '@renderer/api/salesDep'
import { useUserStore } from '@renderer/store'
import dayjs from 'dayjs'
import { formatPrice, decimalRound } from '@renderer/utils/mixins'

interface Props {
  checkData: SaleResItem
}
withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {
      saleOrderId: '',
      saleOrderCode: '',
      customerId: '',
      orderStatus: '',
      sellersName: '',
      planDeliveryDate: '',
      deliveryMethod: '',
      settlementType: '',
      remark: '',
      customerName: '',
      customerAddress: '',
      contactName: '',
      contactPhone: '',
      orderAmt: 0,
      isInclTax: 0,
      detailList: [],
      createdBy: '',
      createdDt: '',
      updatedBy: '',
      updatedDt: '',
      sellersId: '',
      fileList: []
    }
  }
})
const userStore = useUserStore().localUserInfo
//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
.slogan {
  margin: 20px 0;
  text-align: center;
  font-size: 16px;
}
.bill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
  .info-item {
    flex: 1;
  }
}
.company-info {
  display: flex;
  padding: 0px 20px;
  justify-content: space-between;
  width: 100%;
  line-height: 24px;
}
</style>
